<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>首页</title>
		<link rel="stylesheet" type="text/css" href="css/index.css">
		<link rel="stylesheet" type="text/css" href="css/ziy.css">
		<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
		<script type="text/javascript" src="js/jquery.SuperSlide.2.1.1.source.js"></script>
		<style>

			.jinp_tuij_lb li {
				margin-right: 3%;
				width: 31%;
			}

			.jinp_tuij_lb li:nth-child(3n+3) {
				margin-right: 0;
			}

			.jinp_tuij_lb li>a:first-of-type,
			.jinp_tuij_lb li>a:first-of-type>img {
				width: 100%;
			}

			.logo {
				width: 20% !important;
			}

			.search {
				width: 35% !important;
			}

			.search>input {
				width: 50% !important;
			}
		</style>
	</head>
	<body>
		<!--侧边-->
		<div class="jdm-toolbar-wrap J-wrap">
			<div class="jdm-toolbar J-toolbar">
				<div class="jdm-toolbar-panels J-panel"></div>
				<div class="J-trigger jdm-toolbar-tab jdm-tbar-tab-message" data-name="message"><a target="_blank"
						href="#">
						<i class="tab-ico"></i>
						<em class="tab-text">我的消息
						</em></a>
				</div>
			</div>
			<div class="jdm-toolbar-footer"></div>
			<div class="jdm-toolbar-mini"></div>
			<div id="J-toolbar-load-hook" clstag="h|keycount|cebianlan_h|load"></div>
		</div>
		<!--头部-->
		<div id="header">
			<div class="header-box">
				<h3 class="huany">23215220322 唐铭阳</h3>
				<ul class="header-left"></ul>
				<ul class="header-right">
					<li class="denglu dr">Hi~<a class="red" href="dengl.html">请登录!</a> <a href="zhuc.html">[免费注册]</a>
					</li>
					<li class="shu"></li>
					<li class="denglu"><a class="ing_ps" href="wod_shouc.html">我的收藏</a></li>
					<li class="shu"></li>
					<li class="denglu"><a class="ing_ps ps1" href="wod_dingd.html">我的订单</a></li>
					<li class="shu"></li>
					<li class="denglu"><a class="ing_ps ps2" href="shengq_shouh.html">售后服务</a></li>
					<li class="shu"></li>
					<li class="shouji bj">
						<a class="ing_ps ps3" href="#">手机醒肤</a>
						<i class="ci-right ">
							<s class="jt">◇</s>
						</i>
						<div class="shouji1">
							<img src="images/店铺/二维码.jpg" class="shouji4">
							<div class="shouji2">
								<p>醒肤客户端</p>
								<p class="red">首次下单满99元，送99元</p>
							</div>
							<div class="yi">
								<img src="images/店铺/二维码.jpg" class="shouji4">
								<div class="er">
									<p>醒肤微信公众号</p>
									<p class="red">关注醒肤公众号的积分，换大礼</p>
								</div>
							</div>
						</div>
					</li>
				</ul>
			</div>
		</div>
		<!--搜索栏-->
		<div class="toub_beij">
			<div class="logo"><a href="index.html"><img src="./images/店铺/logo4.jpg"
						style="width: 255px;height: 95px;"></a></div>
			<div class="search">
				<input type="text" placeholder="美妆一折抢" class="text" id="textt">

				<a href="search_result.html"><button class="button">搜索</button></a>
			</div>
			<div class="right">
				<i class="gw-left"></i>
				<i class="gw-right"></i>
				<div class="sc">
					<i class="gw-count">0</i>
					<i class="sd"></i>
				</div>
				<a href="gouw_che.html">我的购物车</a>
				<div class="dorpdown-layer">
					<ul>
						<li class="meiyou">
							<img src="./images/settleup-nogoods.png">
							<span>购物车中还没有商品，赶紧选购吧！</span>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<div class="dianp_daoh_beij">
			<div class="beij_center">
				<div class="dp_daoh_ul">
					<ul>
						<li class="dp_dh_li"><a href="index.html" class="lin_color">首页</a></li>
						<li class="dp_dh_li">
							<a href="index.html" class="lin_color">全部商品<i class="ci-leftll"><s class="jt">◇</s></i></a>
							<div class="quanb_shangp_lieb">
								<dl>
									<dt><a href="#">彩妆</a></dt>
									<dd>
										<ul>
											<li><a href="#">底妆</a></li>
											<li><a href="#">口红</a></li>
											<li><a href="#">腮红</a></li>
											<li><a href="#">修容</a></li>
											<li><a href="#">眼眉妆</a></li>
										</ul>
									</dd>
								</dl>
								<dl>
									<dt><a href="#">护肤</a></dt>
									<dd>
										<ul>
											<li><a href="#">水乳</a></li>
											<li><a href="#">精华</a></li>
											<li><a href="#">洁面</a></li>
											<li><a href="#">眼霜</a></li>
											<li><a href="#">卸妆</a></li>
											<li><a href="#">防晒</a></li>
											<li><a href="#">唇部护理</a></li>
										</ul>
									</dd>
								</dl>
								<dl>
									<dt><a href="#">个人护理</a></dt>
									<dd>
										<ul>
											<li><a href="#">洗发水</a></li>
											<li><a href="#">护发素</a></li>
											<li><a href="#">精油</a></li>
										</ul>
									</dd>
								</dl>
								<dl>
									<dt><a href="#">美妆工具</a></dt>
									<dd>
										<ul>
											<li><a href="#">睫毛夹</a></li>
											<li><a href="#">粉扑</a></li>
											<li><a href="#">化妆刷</a></li>
										</ul>
									</dd>
								</dl>
								<dl>
									<dt><a href="#">保健品</a></dt>
									<dd>
										<ul>
											<li><a href="#">美容养颜</a></li>
											<li><a href="#">家庭健康</a></li>
											<li><a href="#">美体塑身</a></li>
											<li><a href="#">保健</a></li>
										</ul>
									</dd>
								</dl>
								<dl>
									<ul>
										<li></li>
									</ul>
									</dd>
								</dl>
							</div>
						</li>
						<li class="dp_dh_li"><a href="wod_shouc.html" class="lin_color">收藏商品</a></li>
						<li class="dp_dh_li"><a href="wod_jifen.html" class="lin_color">积分详情</a></li>
						<li class="dp_dh_li"><a href="wod_dingd.html" class="lin_color">订单详情</a></li>
					</ul>
				</div>
			</div>
		</div>
		<!--banner-->
		<div class="dianp_banner_brij" style="width: 100%;">
			<div class="slideBox_dianp" style="width: 100%;">
				<div class="hd" style="left: calc(50% - 37px) !important; right: 0 !important;">
					<ul>
						<li>1</li>
						<li>2</li>
						<li>3</li>
					</ul>
				</div>
				<div class="bd" style="width: 100%;">
					<ul style="width: 100%;left: 0 !important; margin-left: 0 !important;">
						<li style="width: 100%;"><a href="#" target="_blank"><img src="images/店铺/轮播5.jpg" /></a></li>
						<li style="width: 100%;"><a href="#" target="_blank"><img src="images/店铺/轮播8.jpg" /></a></li>
						<li style="width: 100%;"><a href="#" target="_blank"><img src="images/店铺/轮播6.jpg" /></a></li>
					</ul>
				</div>
				<a class="prev" href="javascript:void(0)"></a>
				<a class="next" href="javascript:void(0)"></a>
			</div>
		</div>
		<script type="text/javascript">
			jQuery(".slideBox_dianp").slide({
				mainCell: ".bd ul",
				autoPlay: true
			});
		</script>
		<div class="beij_center" >
			<div class="dp_sy_biaot">
				<div class="dis_jvz">
					<div class="zuoy_xian"></div>
					<div class="biaot_minz">
						<h1>精品推荐</h1>
						<h3>Boutique zone</h3>
					</div>
					<div class="zuoy_xian"></div>
				</div>
			</div>
			<div class="jinp_tuij_lb">
				<ul>
					<li>
						<a href="shangp_xq.html" class="jngp_img"><img src="images/店铺/图片1.jpg"></a>
						<a href="shangp_xq.html" class="jinp_biaot">Christophe Robin 玫瑰丰盈护色洗发乳 250ml/瓶</a>
						<span>¥250.00</span>
					</li>
					<li>
						<a href="shangp_xq2.html" class="jngp_img"><img src="images/店铺/图片2.jpg"></a>
						<a href="shangp_xq2.html" class="jinp_biaot">Christophe Robin 刺梨籽油柔亮修护发膜 (50ml)</a>
						<span>￥260.00</span>
					</li>
					<li>
						<a href="shangp_xq3.html" class="jngp_img"><img src="images/店铺/图片3.jpg"></a>
						<a href="shangp_xq3.html" class="jinp_biaot">Christophe Robin 芦荟保湿修护喷雾 150ml/瓶</a>
						<span>¥260.00</span>
					</li>
					<li>
						<a href="shangp_xq4.html" class="jngp_img"><img src="images/提交订单/彼得罗夫.jpg"></a>
						<a href="shangp_xq4.html" class="jinp_biaot">彼得罗夫水漾透明质酸云朵面霜 50ml</a>
						<span>￥391.50</span>
					</li>
					<li>
						<a href="shangp_xq.html" class="jngp_img"><img src="images/店铺/图片6.jpg"></a>
						<a href="shangp_xq.html" class="jinp_biaot">欧缇丽葡萄蔓凝白修颜保湿霜 50ml</a>
						<span>￥296.00</span>
					</li>
					<li>
						<a href="shangp_xq.html" class="jngp_img"><img src="images/店铺/图片7.jpg"></a>
						<a href="shangp_xq.html" class="jinp_biaot">欧缇丽皇后水 两瓶装 （2X100ml）</a>
						<span>¥445.44</span>
					</li>
				</ul>
			</div>
		</div>
		<div class="beij_center">
			<div class="dp_sy_biaot">
				<div class="dis_jvz">
					<div class="zuoy_xian"></div>
					<div class="biaot_minz">
						<h1>新品上市</h1>
						<h3>new product</h3>
					</div>
					<div class="zuoy_xian"></div>
				</div>
			</div>
			<div class="jinp_tuij_lb">
				<ul>
					<li>
						<a href="shangp_xq.html" class="jngp_img"><img src="images/店铺/图片1.jpg"></a>
						<a href="shangp_xq.html" class="jinp_biaot">Christophe Robin 玫瑰丰盈护色洗发乳 250ml/瓶</a>
						<span>¥250.00</span>
					</li>
					<li>
						<a href="shangp_xq2.html" class="jngp_img"><img src="images/店铺/图片2.jpg"></a>
						<a href="shangp_xq2.html" class="jinp_biaot">Christophe Robin 刺梨籽油柔亮修护发膜 (50ml)</a>
						<span>￥260.00</span>
					</li>
					<li>
						<a href="shangp_xq3.html" class="jngp_img"><img src="images/店铺/图片3.jpg"></a>
						<a href="shangp_xq3.html" class="jinp_biaot">Christophe Robin 芦荟保湿修护喷雾 150ml/瓶</a>
						<span>¥260.00</span>
					</li>
					<li>
						<a href="shangp_xq4.html" class="jngp_img"><img src="images/店铺/图片5.jpg"></a>
						<a href="shangp_xq4.html" class="jinp_biaot">菲洛嘉十全大补面膜 50ml</a>
						<span>￥382.00</span>
					</li>
					<li>
						<a href="shangp_xq.html" class="jngp_img"><img src="images/店铺/图片6.jpg"></a>
						<a href="shangp_xq.html" class="jinp_biaot">欧缇丽葡萄蔓凝白修颜保湿霜 50ml</a>
						<span>￥296.00</span>
					</li>
					<li>
						<a href="shangp_xq.html" class="jngp_img"><img src="images/店铺/图片7.jpg"></a>
						<a href="shangp_xq.html" class="jinp_biaot">欧缇丽皇后水 两瓶装 （2X100ml）</a>
						<span>¥445.44</span>
					</li>
				</ul>
			</div>
		</div>
		<div class="beij_center">
			<div class="dp_sy_biaot">
				<div class="dis_jvz">
					<div class="zuoy_xian"></div>
					<div class="biaot_minz">
						<h1>热销专区</h1>
						<h3>Hot zone</h3>
					</div>
					<div class="zuoy_xian"></div>
				</div>
			</div>
		</div>
		<div class="rexzqxt_beij">
			<div class="beij_center">
				<div class="picScroll_left_dianp">
					<div class="hd">
						<ul></ul>
					</div>
					<div class="bd jinp_tuij_lb">
						<ul class="picList">
							<li>
								<a href="#" class="jngp_img"><img src="images/店铺/图片8.jpg"></a>
								<a href="#" class="jinp_biaot">香缇卡隔离 | 有色面霜SPF15 - 50g</a>
								<span>￥139.00</span>
							</li>
							<li>
								<a href="#" class="jngp_img"><img src="images/店铺/图片9.jpg"></a>
								<a href="#" class="jinp_biaot">Elemis TriEnzyme 三重酵素焕肤洁面乳200ml</a>
								<span>¥390.00</span>
							</li>
							<li>
								<a href="#" class="jngp_img"><img src="images/店铺/图片10.jpg"></a>
								<a href="#" class="jinp_biaot">伊丽莎白雅顿视黄醇神经酰胺胶囊 | 90 粒</a>
								<span>￥783.00</span>
							</li>
							<li>
								<a href="#" class="jngp_img"><img src="images/店铺/图片8.jpg"></a>
								<a href="#" class="jinp_biaot">香缇卡隔离 | 有色面霜SPF15 - 50g</a>
								<span>￥139.00</span>
							</li>
							<li>
								<a href="#" class="jngp_img"><img src="images/店铺/图片9.jpg"></a>
								<a href="#" class="jinp_biaot">Elemis TriEnzyme 三重酵素焕肤洁面乳200ml</a>
								<span>￥139.00</span>
							</li>
						</ul>
					</div>
				</div>
				<script type="text/javascript">
					jQuery(".picScroll_left_dianp").slide({
						titCell: ".hd ul",
						mainCell: ".bd ul",
						autoPage: true,
						effect: "left",
						autoPlay: true,
						vis: 3,
						scroll: 1,
						trigger: "click"
					});
				</script>
			</div>
		</div>
		<!--底部-->
		<div class="dib_beij">
			<div class="dib_jvz_beij">
				<div class="shangp_baoz">
					<p>追溯源头&nbsp;&nbsp;购物无忧</p>
					<p class="beng1">假一赔十&nbsp;&nbsp;正品保证</p>
					<p class="beng2">低价实惠&nbsp;&nbsp;帮你省钱</p>
					<p class="beng3">闪电直发&nbsp;&nbsp;专业配送</p>
				</div>
				<div class="zhongj_youx">
					<div class="lieb_daoh">
						<h4>物流配送</h4>
						<ul>
							<li><a href="#">配送查询</a></li>
							<li><a href="#">配送服务</a></li>
							<li><a href="#">配送费用</a></li>
							<li><a href="#">配送时效</a></li>
							<li><a href="#">签收与验货</a></li>
						</ul>
					</div>
					<div class="lieb_daoh">
						<h4>支付与账户</h4>
						<ul>
							<li><a href="#">货到付款</a></li>
							<li><a href="#">在线支付</a></li>

							<li><a href="zhangh_anq.html">账户安全</a></li>
						</ul>
					</div>
					<div class="lieb_daoh">
						<h4>购物帮助</h4>
						<ul>
							<li><a href="#">购物保障</a></li>
							<li><a href="#">购物流程</a></li>
							<li><a href="#">联系我们</a></li>
						</ul>
					</div>
					<div class="lieb_daoh">
						<h4>售后服务</h4>
						<ul>
							<li><a href="#">退换货服务</a></li>
							<li><a href="#">退款说明</a></li>

						</ul>
					</div>
					<div class="lieb_daoh">
						<div class="kef_dianh">
							<p>客服电话</p><span>400-1009-727</span>
						</div>
						<div class="kef_dianh kef_dianh_youx">
							<p>意见收集邮箱</p>
							<p>199384884@.com</p>
						</div>
					</div>
					<div class="lieb_daoh lieb_daoh_you">
						<div class="erw_ma_beij">
							<div class="erw_m">
								<h1><img src="images/店铺/二维码.jpg" style="width: 127px; height: 127px;"></h1>
								<span>扫码下载醒肤客户端</span>
							</div>
							<div class="erw_m">
								<h1><img src="images/店铺/二维码.jpg" style="width: 127px; height: 127px;"></h1>
								<span>扫码下载醒肤客户端</span>
							</div>
						</div>
					</div>
				</div>
				<div class="beia_hao">
					<p>粤ICP备：20219999号 粤ICP证：22-20200727号 </p>
					<p class="gonga_bei">粤公网安备：7271999002737910号</p>
					<div class="renz_">
						<span></span>
						<span class="span1"></span>
						<span class="span2"></span>
						<span class="span3"></span>
					</div>
				</div>
			</div>
		</div>
		<div style="display:inline-block;">
    <button id="checkoutBtn" style="margin-left:10px;">结算</button>
    <button id="clearCartBtn" style="margin-left:5px;">清空购物车</button>
</div>
<form action="success.html" method="post">
    <!-- 订单信息 ... -->
    <button type="submit">提交订单</button>
</form>
<!-- 购物车列表展示区域 -->
<div id="cartList" style="margin:20px 0;"></div>
<script>
// 商品数据
const products = [
    {id: 1, name: "玫瑰丰盈护色洗发乳", price: 250},
    {id: 2, name: "刺梨籽油柔亮修护发膜", price: 260},
    {id: 3, name: "芦荟保湿修护喷雾", price: 260},
    {id: 4, name: "菲洛嘉十全大补面膜", price: 382},
    {id: 5, name: "欧缇丽葡萄蔓凝白修颜保湿霜", price: 296},
    {id: 6, name: "欧缇丽皇后水 两瓶装", price: 445.44}
];

// 购物车数据
let cart = JSON.parse(localStorage.getItem('cart')) || [];

// 添加商品到购物车
function addToCart(productId) {
    const product = products.find(p => p.id === productId);
    if (!product) return;
    const item = cart.find(i => i.id === productId);
    if (item) {
        item.count += 1;
    } else {
        cart.push({...product, count: 1});
    }
    updateCart();
}

// 增加数量
function increaseCount(productId) {
    const item = cart.find(i => i.id === productId);
    if (item) {
        item.count += 1;
        updateCart();
    }
}

// 减少数量
function decreaseCount(productId) {
    const item = cart.find(i => i.id === productId);
    if (item && item.count > 1) {
        item.count -= 1;
        updateCart();
    } else if (item && item.count === 1) {
        // 数量为1时减少即删除
        removeFromCart(productId);
    }
}

// 删除商品
function removeFromCart(productId) {
    cart = cart.filter(i => i.id !== productId);
    updateCart();
}

// 更新购物车数量和列表
function updateCart() {
    localStorage.setItem('cart', JSON.stringify(cart));
    if(document.querySelector('.gw-count')){
        document.querySelector('.gw-count').innerText = cart.reduce((sum, i) => sum + i.count, 0);
    }
    renderCartList();
}

// 渲染购物车商品列表
function renderCartList() {
    let cartDiv = document.getElementById('cartList');
    if (!cartDiv) return;
    if (cart.length === 0) {
        cartDiv.innerHTML = '<p>购物车为空</p>';
        return;
    }
    let html = '<table border="1" cellpadding="6" style="border-collapse:collapse;"><tr><th>商品</th><th>单价</th><th>数量</th><th>操作</th></tr>';
    cart.forEach(item => {
        html += `<tr>
            <td>${item.name}</td>
            <td>¥${item.price}</td>
            <td>
                <button onclick="decreaseCount(${item.id})">-</button>
                ${item.count}
                <button onclick="increaseCount(${item.id})">+</button>
            </td>
            <td>
                <button onclick="removeFromCart(${item.id})">删除</button>
            </td>
        </tr>`;
    });
    html += '</table>';
    cartDiv.innerHTML = html;
}

// 结算
document.getElementById('checkoutBtn').onclick = function() {
    if (cart.length === 0) {
        alert('购物车为空！');
        return;
    }
    let total = cart.reduce((sum, i) => sum + i.price * i.count, 0);
    alert('总价：¥' + total.toFixed(2));
}

// 清空购物车
document.getElementById('clearCartBtn').onclick = function() {
    cart = [];
    updateCart();
    alert('购物车已清空');
}

// 页面加载时更新购物车数量和列表
updateCart();

// 给每个精品推荐区商品添加“加入购物车”按钮
// ...existing code...
document.querySelectorAll('.jinp_tuij_lb ul li').forEach((li, idx) => {
    // 避免重复添加按钮
    if (li.querySelector('.add-cart-btn')) return;
    let btn = document.createElement('button');
    btn.innerText = '加入购物车';
    btn.className = 'add-cart-btn';
    btn.style.marginLeft = '10px';
    btn.onclick = () => addToCart(idx + 1); // 商品id从1开始
    li.appendChild(btn);
});
// ...existing code...

// 让增减/删除按钮生效（全局作用域）
window.increaseCount = increaseCount;
window.decreaseCount = decreaseCount;
window.removeFromCart = removeFromCart;
</script>
</body>
</html>
